<template>
	<view>
		<div>
			<navitop> 
				<i class="iconfont icon-jiantou-copy" slot="left-slot" @click="outs"></i>
				<span slot="center-slot">{{data}}</span>
				<!-- <i class="iconfont icon-youcecaidan" slot="right-slot"  @click="tapPopup(data)"></i> -->
			</navitop>
		</div>
		
		<div class="detial" :style='window_height'>
			<div style="background-color: #f0f0f0;" ></div>
			<scroll-view class="staff_b" scroll-y="true" touch-action=none; >
				<div class="my_icon">
					<div @click="user_share">
						<i class="iconfont icon-fenpei"></i><br>
						<text><h4>立即分享</h4></text>
					</div>
					<div @click="partner">
						<i class="iconfont icon-kehu2"></i><br>
						<text><h4>我的资源</h4></text>
					</div>
					<div @click="shart">
						<i class="iconfont icon-shouyiwending"></i><br>
						<text><h4>我的收益</h4></text>
					</div>
				</div>
				<div class="share_introduce">
					<h3 style="text-align: center;padding: 0 0 20px 0;color:red">立即分享，佣金高达70%</h3>
					<div>
						佣金规则
					</div>
					<div>
						1. 分享给客户：客户首次购买后，您能获得的收益提成比例为40%；
					</div>
					<div>
						2. 分享给直接好友：好友的客户首次购买后，您能获得的收益提成比例为15%；
					</div>
					<div>
						3. 分享给间接好友：间接好友的客户首次购买后，您能获得的收益提成比例为10%；
					</div>
					<div>
						4. 分享给三级好友：三级好友的客户首次购买后，您能获得的收益提成比例为5%；
					</div>
				</div>
			</scroll-view>
		</div>
		<!-- 弹窗组件  收益--> 
		<popus ref="profit_alert">
			<div :style="alertWidth">
				<profit :data='title' @colos="colos"></profit>
			</div>
		</popus>
		
		<!-- 弹窗组件 小伙伴-->
		<popus ref="partner_alert">
			<div :style="alertWidth">
				<partner :data='title' @partner_colo="partner_colo"></partner>
			</div>
		</popus>
		
		<popus ref="partner_share">
			<div class="share_out">
				<div class="share_out_class">
					<div v-for="(item,index) in list_tal" @click="share_click(item)">
						<div v-if='item.inddex !== 2'>
							<div class="share_out_icon" >
								<i :class="['iconfont',item.icon]"></i>
							</div>
							<div class="share_out_txt">
								<text>{{item.name}}</text>
							</div>
						</div>
						<div v-else>
							<div class="share_out_icon" >
								<i :class="['iconfont',item.icon]"></i>
							</div>
							<div class="share_out_txt_ind">
								<text>{{item.name}}</text>
							</div>
						</div>
					</div>
				</div>
			</div>
		</popus>
	
	</view>
</template>

<script>
	import profit from "@/pages/common/my/subpage/share/profit"
	import partner from "@/pages/common/my/subpage/share/partner.vue"
	import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popup'
	import navitop from '@/components/common/navi-top'
	import {getShareInfo,sharegetList} from '@/common/api/my/myapi.js'
	export default {
		components:{ 
			navitop,  
			popus,
			profit,
			partner
		}, 
		props:{
			data: {
				default: ''
			}
		},
		data(){
			return {
				window_height:'',
				alertWidth: '',
				title: '',
			}
		},
		mounted() {
			let _this = this;
			uni.getSystemInfo({
			    success: function (res) {
					_this.alertWidth = 'width:' + res.windowWidth + 'px;'
			    }
			});
		   const res = uni.getSystemInfoSync();
		   this.window_height = 'height:' + res.windowHeight + 'px;';
		   
		},
		methods:{
			share(){
				this.$refs.sharepopup.open()
			},
			
			outs(){
				this.$emit('colose',1)
			},
			
		
			
			
			// 分享
			share_click(val){
				uni.showLoading({
					title: '正在加载...'
				})
				if(val.inddex !== 4){
					getShareInfo().then((rows)=>{
						if(rows.code == 200){
							uni.hideLoading();
							uni.share({
								provider: "weixin",
								scene: val.code,
								type: 0,
								href: rows.data.registerUrl,
								title: rows.data.title, 
								summary: rows.data.shareRemark,
								imageUrl: rows.data.shareImgUrl,
								success: function (res) {
									console.log("success:" + JSON.stringify(res)); 
								},
								fail: function (err) { 
									console.log("fail:" + JSON.stringify(err));
								}
							});
						}
					})
				}else{
					uni.setClipboardData({
						data: 'https://www.sibanyun.com/', 
						complete() {
							uni.showToast({
								title: "已复制到剪贴板"
							})
						}
					})
				}
			},
			
			// 分享
			user_share(){ 
				// this.$refs.partner_share.open('bottom')
				uni.navigateTo({
					url: '/pages/common/my/subpage/share/sharelist'
				})
			},
			//  收益
			shart(){
				this.title = '我的收益'
				this.$refs.profit_alert.open('right') 
			},
			
			// 小伙伴
			partner(){
				this.title = '我的资源'
				this.$refs.partner_alert.open('left')
			},
			
			colos(){
				this.$refs.profit_alert.close()
			},
			
			partner_colo(){
				this.$refs.partner_alert.close()
			}
			
		}
	}
	
</script>

<style scoped lang="scss">
.detial {
	background-color: #fff;
}
.my_icon {
	display: flex;
	justify-content: space-around;
	text-align: center;
	border-bottom: 8px solid #f0f0f0;
	padding-top: 80px;
	height: 120px;
	i {
		font-size: 40px;
		color: #217fd0;
	}
	margin-top: 50px;
}

.share_out {
	height: 550rpx;
	width: 100%;
	background-color: #fff;
	border-radius: 20px 20px 0 0;
}
.share_out_class {
	padding: 30rpx 0 0 0 ;
	width: 95%;
	display: flex;
	justify-content: space-around;
	margin: auto;
	.share_out_icon {
		font-size: 50px;
		color: #217fd0;
		text-align: center;
	}
	.share_out_txt {
		font-size: 15px;
		color: #868282;
		width: 80px;
		text-align: center;
	}
	.share_out_txt_ind {
		font-size: 15px;
		color: #868282;
		width: 50px;
		text-align: center;
	}
}
.share_introduce {
	width: 95%;
	margin: auto;
	font-size: 14px;
	padding: 10px 0 0 0;
	div {
		// height: 90rpx;
	}
}
</style>
